<template>
	<div class="breadcrumb-wrapper">
        <n-space>
            <n-breadcrumb
            >
            <n-breadcrumb-item>
             <font style="font-weight: bold;">当前位置: </font>
            </n-breadcrumb-item>
          </n-breadcrumb>
            <div
                class="breadcrumb-box"
                @click.self="handleClickBreadCrumbSelf"
            >
                <n-breadcrumb
                  v-if="![0, 8].includes(fileType) && !['Share'].includes($route.name)"
                >
                    <n-breadcrumb-item>
                      {{ fileTypeMap[fileType] }}
                    </n-breadcrumb-item>
                </n-breadcrumb>
                <n-breadcrumb v-else>
                  <n-breadcrumb-item
                      v-for="(item, index) in breadCrumbList"
                      :key="index"
                      @click="getRouteQuery(item)"
                  >
                    {{ item.name }}
                  </n-breadcrumb-item>
                </n-breadcrumb>
            </div>
        </n-space>


		</div>
</template>

<script lang="ts" setup>
import {computed, ref} from "vue";
import {useRoute} from "vue-router";
import {router} from "@/router";
const $route = useRoute();

const props = defineProps({
    fileType : {
        required: true,
        type: Number
    },
    filePath : {
        required: true,
        type: String
    }
})

// 输入框显示
const isShowInput = ref(true)

// 路径
const inputFilePath = ref("")

const fileTypeMap = {
    1: '全部图片',
    2: '全部文档',
    3: '全部视频',
    4: '全部音乐',
    5: '其他',
    6: '回收站'
}


// 获取文件参数
const getRouteQuery = (item:any) => {
  let routeName = $route.name
  if (routeName === 'Share') {
    // 当前是查看他人分享列表的页面
    router.push({
      name: 'Share',
      query: {  filePath: item.path }
    })
  } else if (props.fileType === 8) {
    // 当前是我的已分享列表页面
    router.push({
      name: 'CloudPan',
      query: {
        fileType: 8,
        filePath: item.path,
        shareBatchNum:
            item.path === '/' ? undefined : $route.query.shareBatchNum //  当查看的是根目录，批次号置空
      }
    })
  } else {
    // 网盘页面
    router.push({
      name: 'CloudPan',
      query: { filePath: item.path, fileType: 0 }
    })
  }
}

const breadCrumbList = computed(() => {
  let filePathList = props.filePath ? props.filePath.split('/') : []
  let res = [] //  返回结果数组
  let _path = [] //  存放祖先路径
  for (let i = 0; i < filePathList.length; i++) {
    if (filePathList[i]) {
      _path.push(filePathList[i])
      res.push({
        path: _path.join('/'),
        name: filePathList[i]
      })
    } else if (i === 0) {
      //  根目录
      filePathList[i] = ''
      _path.push(filePathList[i])
      res.push({
        path: '/',
        name:
            props.fileType === 0
                ? '全部文件'
                :  props.fileType === 8
                    ? '我的分享'
                    : $route.name === 'Share'
                        ? '全部分享'
                        : ''
      })
    }
  }
  return res
})


/**
 * 点击面包屑导航栏空白处
 */
function handleClickBreadCrumbSelf() {
    isShowInput.value = true;
}

function handleInputBlurEnter() {
    isShowInput.value = false
}
</script>

<style lang="stylus" scoped>

.breadcrumb-wrapper {
    padding: 0;
    line-height: 30px;
    display: flex;
    margin-top: 20px;
    padding-bottom: 5px;
    border: none;
    border-bottom: 1px solid #ccc;
    .breadcrumb-box {
        padding: 0 8px;
        flex: 1;
        display: flex;
        &.able-input {
            cursor: pointer;
            &:hover {
                background: $tabBackColor;
            }
        }
    }
}
</style>
